<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐盒子</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>

    </style>
</head>

<body>
    <!-- 歌曲音频   https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687 -->
    <!-- 
    根据歌曲id 异步查询 歌曲的详情音频URL
    https://autumnfish.cn/song/url

    根据歌曲id 异步查询 歌曲的详情评论
    https://autumnfish.cn/comment/music

    根据歌曲id异步查询 歌曲的中间的图片
    https://autumnfish.cn/song/detail 
    
    歌曲列表
    https://autumnfish.cn/search
    -->
    <div class="container">
        <div class="top">
            <input type="text" placeholder="请输入歌曲" id="content">
            <button id="search">搜索</button>
        </div>
        <div class="music">
            <ul id="ul">
                <script id="songlist" type="text/html">
                    {{ each data.result.songs v }}
                    <li data-id="{{v.id}}" class="play"><span> {{v.name}} </span> <span> {{v.artists[0].name}} </span> </li>   
                    {{ /each }}
                </script>

        </div>
        <div class="audio_con">
            <audio controls autoplay loop class="myaudio"
                src="https://7072-prod-2v1o0-1303040177.tcb.qcloud.la/%E5%85%84%E5%A6%B9%20-%20%E6%96%B9%E5%A4%A7%E5%90%8C%E3%80%81%E8%96%9B%E5%87%AF%E7%90%AA.mp3?sign=b3d0b548449f7e56ea69053ab3febe9c&t=1621685687"></audio>
        </div>

    </div>

    <script>
        $(function () {
            //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
            $('#search').click(function () {
                var keyword = $('#content').val()
                console.log(keyword);
                axios({
                    url: "https://autumnfish.cn/search",
                    method: "get",
                    params: {
                        keywords: keyword,
                    },
                }).then(res => {
                    console.log(res);
                    // var htmlStr = template('ul',res)
                    $('#ul').html(template('songlist',res))
                })
                
            })

            // 获取id并使用该id,获取音频url进行播放
            $('#ul').on('click','.play',function(){
                var id = $(this).attr('data-id')
                console.log(id);
                axios({
                    url:"https://autumnfish.cn/song/url",
                    method:'get',
                    params: {
                        id:id,
                    }
                }).then(res => {
                    console.log(res);
                    var songurl = res.data.data[0].url
                    console.log(songurl);
                    $('.myaudio').attr('src',songurl)
                })
            })

        })
    </script>
</body>

</html>